<div{{ attributes }}>
    Todo List: {{ name }}

    <ul>
    {% for item in items %}
        {% set componentProps = { text: item.text, textLength: item.text|length } %}
        {% if includeDataLiveId %}
            {% set componentProps = componentProps|merge({id: ('todo-item-' ~ loop.index) }) %}
        {% endif %}
        {% if loop.index is odd %}
            {{ component('todo_item', componentProps) }}
        {% else %}
            {% component 'todo_item' with componentProps %}{% endcomponent %}
        {% endif %}
    {% endfor %}
    </ul>
</div>
